<template>
<FocusSwitch class='page pagewh'>
  <FocusScroll class="focus-scroll">
    <div class="focus-box">
      <FocusWidget class="focus-item" v-for="(val,i) in dataArr" :key="i">{{val}}{{i}}</FocusWidget>
      <FocusBox class="focus-box" :style="{ width: '500px' }"></FocusBox>
      <FocusBox class="focus-box" :style="{ width: '500px' }" v-for="(_, i) in dataBox" :key="i">
        <FocusWidget class="focus-item" v-for="(val,i) in dataArr" :key="i">{{val}}{{i}}</FocusWidget>
      </FocusBox>
    </div>
  </FocusScroll>
</FocusSwitch>
</template>

<script lang="tsx">
import { defineComponent, ref } from "vue";
import { FocusSwitch, FocusBox, FocusWidget, FocusScroll, usePopup } from "@/focus";

export default defineComponent({
  name: "",
  emits: [],
  props: {},
  components:{ FocusSwitch, FocusBox, FocusWidget, FocusScroll },

  setup(){
    const dataBox = ref(new Array(5).fill("box"))
    const dataArr = ref(new Array(9).fill("widget"))
    const { onOpen, onHide } = usePopup()


    
    return {
      dataArr,
      dataBox,
    }
  },
})
</script>

<style scoped src="./index.less"></style>  
